<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ page isELIgnored="false"%>
<script>
$(function () {
	var wasConfigurationObj ={};
	$( "#configurationTab" ).tabs({ heightStyle: "fill" });
	$("#addServerDialog").dialog({
		modal: true,
        buttons: {
         	"Add" : function(){
         		$(this).find("input").each(function(){
         			var serverName=$(this).val();
         			var profileId=$('#profileList').find('option:selected').val()
         			var nameExists=false;
         			for(var i = 0; i < wasConfigurationObj.length; i++) {
         				var obj = wasConfigurationObj[i];
         				if(obj.serverName == serverName){
         					nameExists=true;
         					break;
         				}
         			}
         			if(!nameExists){
         				 $.ajaxq("config",{

                       	  type: "POST",
                       	  dataType: 'json',
                       	  global: false,
                       	  url: "addWasConfiguration.htm",
                       	  data: {
                       		profileId: profileId,
                       		serverName: serverName
                       	  },
                       	  success: function(result){
                       		  if (result.Result == "OK") {
                       			  generateDiag("center","success", "Successfuly Saved");
                       			 updateAvialableServerConfiguration();
                       			emptyConfigArea();
                       		  }else{
                       			  generateDiag("center","error", result.Message);
                       		  }
                       	  },
                       	  
                       	});
         			}else{
         				generateDiag("center","error", "Server Name Already Exists!");
         			}
         			
         		})
         	},
         	"Cancel" : function() {
                $(this).dialog("close");
                
            }
         },
         
        autoOpen: false
        
	});
	
	$( "#leftNavAccord" ).accordion({ header: "h3", heightStyle: "fill" });	
	$('#leftNavAccord div ul li').click(function(e) {
		 e.preventDefault();	
		 if ( $(this).attr('title') == "add"){
				if( $('#leftNav').tree('getTree') != null){
					 var tree = $('#leftNav').tree('getTree');
				     var node1 = tree.children[0];
				     var profileId=node1.profileId;
				     $("#addServerDialog").dialog("open");
				     
				    
				     
				}
		 }
		 if ( $(this).attr('title') == "delete"){
			 if( $('#leftNav').tree('getTree') != null){
				var id= $('#leftNav').tree('getSelectedNode').id
				var name= $('#leftNav').tree('getSelectedNode').name
				if( id != null){
					 $.ajaxq("config",{
                     	  type: "POST",
                     	  dataType: 'json',
                     	  global: false,
                     	  url: "deleteWasConfiguration.htm",
                     	  data: {
                     		id: id
                     	  },
                     	  success: function(result){
                     		  if (result.Result == "OK") {
                     			 generateDiag("center","success", "Successfuly Deleted "+name);
                     			 updateAvialableServerConfiguration();
                     			 emptyConfigArea();
                     			  
                     		  }else{
                     			  generateDiag("center","error", result.Message);
                     		  }
                     	  },
                     	  
                     	});
				}
			 }
		 }
	});
	var selectedProfile= $( "#profileList" ).selectBoxIt(
	  {
		    // Uses the jQueryUI theme for the drop down
		    theme: "jqueryui"
	   }).on("change", function() {
		   updateAvialableServerConfiguration()
	   });	

	function updateAvialableServerConfiguration(){
		var profileId=selectedProfile.val();
		 $.ajaxq("config",{
			  type: "POST",
         	  dataType: 'json',
         	  global: false,
         	  url: "getAvailableConfiguration.htm",
         	  data: {
         		profileId: profileId  
         	  },
         	  success: function(result){
         		 if(result.Result == "OK"){
         			wasConfigurationObj= result.Records;
         			createServerList()
         		 }else{
         			generateDiag("center","error", result.Message );
         		 }
         		 
         	  },
         	error: function () {
         		  generateDiag("center","error", "Error Connecting Server");
         	  },
           	beforeSend: function(){
				waitingDialog({title: "Getting Available Confurations", message: "Getting Lists"});
  			},
  			complete: function(){
  				closeWaitingDialog();
  			}
         	  
         	});
	}
	function createServerList(){
		var children=[];
		for(var i = 0; i < wasConfigurationObj.length; i++) {
			var obj = wasConfigurationObj[i];
			var newObj={};
			newObj.label=obj.serverName
			newObj.id=obj.id
			children.push(newObj);
		}
		
		var data = [
		            {
		            	label: $('#profileList').find('option:selected').text(),
		            	id: 'rootValue',
		            	profileId: $('#profileList').find('option:selected').val(),
		            	children: children
		            }
		            ]
		
		$('#leftNav').tree({
			data: data,
			
			autoOpen: true,
			onCreateLi: function(node, $li) {
		        // Add 'icon' span before title
				var level = node.getLevel();
				var icon;
				 if (level == 1) {
					 icon = 'fa fa-folder-open-o';
				 }else if (node.children.length != 0) {
					 icon = 'fa fa-folder-open-o';
				 }else {
					 icon = 'fa fa-cogs';
				 }
				 var $title = $li.find('.jqtree-title');
				 $title.prepend(
		            $('<i class="' + icon + '"></span>')
		         );
       
		    }
		})
		$('#leftNav').bind('tree.click',function(event){
			var node = event.node;
			var name=node.name;
			var id =node.id;
			if(id != "rootValue"){
				var object=getConfigPropertyObj(id);	
				showConfigurations(id)
				
			}
		});
	}
	function getConfigPropertyObj(id){
		for(var i = 0; i < wasConfigurationObj.length; i++) {
			var obj = wasConfigurationObj[i];
			if(obj.id == id){
				return obj;
			}
		}
	}
	
	function emptyConfigArea(){
		$( "#wasconfigurationDisplay" ).empty();
		$( "#wasconfigurationRuntime" ).empty();
	}

	function showConfigurations(id){
		emptyConfigArea();
		$("#wasconfigurationDisplay").load("getWasConfigurationBuildView.htm?id="+id);	
		$("#wasconfigurationRuntime").load("getWasConfigurationRuntimeView.htm?id="+id);
	}
	
	
	
	
	
});
</script>
<div class="filtering">
	<table style="width:100%;">
		<tr>
			<td>Profiles:</td>
			<td>
				<select id="profileList" name="profileList" class="select ui-widget-content ui-corner-all">
					<option value="NONE"></option>
			    	<c:forEach var="profile" items="${profiles}" >
						<option value="${profile.profileId}">${profile.profileName}</option>
					</c:forEach>
			    </select>
			</td>
			<td align="right" style="width:100%;" >
				Select the Profile from Drop Down
			</td>
		</tr>
	</table>

</div>

<table style="width:100%; height:90%">
	<tr>
		<td width="20%" valign="top">
		<div id="leftNavAccord">	
				<div class="acc-content">
					<h3><a href="#">Info</a></h3>
		        	<div><div id="leftNav" class="leftNav"></div></div>
		        	<ul class="icons icon-group ui-widget ui-helper-clearfix">
		        	    <li title="add" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plus"></span></li>   
		        	    <li title="delete" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span></li>
		        	    <li title="help" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"></span></li>    
		       		 </ul>
				</div>
		</div>
		</td>
		<td  width="100%" valign="top" >
				<div id="configurationTab" style="border:none">
					<ul>
					    <li><a href="#wasconfigurationDisplay">Build</a></li>
	 				   <li><a href="#wasconfigurationRuntime">RunTime</a></li>
	 				</ul>
	 				<div id="wasconfigurationDisplay" style="margin-left:10px;height:100%">
						 
					</div>
					<div id="wasconfigurationRuntime" style="margin-left:10px;height:100%">
						
					</div>
				</div>
				
		<!--	<div id="wasConfigurationtree">
				<div  class="acc-content">
					<h3><a href="#">Configuration</a></h3>
		        	<div><div></div><div id="wasConfigurationDiv" class="leftNav"></div></div>
		        	<ul class="icons icon-group ui-widget ui-helper-clearfix">
		        		  <li id="addConfigMenu" title="add" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plus"></span></li>   
		        	      <li title="delete" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span></li>
		        		  <li title="save" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-disk"></span></li>
		        		  <li title="import" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
		        		 <li title="export" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-extlink"></span></li>
		        	     <li title="help" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"></span></li>    
		       		 </ul>
				</div>
			</div>
		</td>
		<td  width="100%" valign="top">
			<div id="wasConfigurationDisplayTree">
				<div class="acc-content">
					<h3><a href="#">Details</a></h3>
		        	<div><div id="wasConfigurationDisplay" class="leftNav"></div></div>
		        	<ul class="icons icon-group ui-widget ui-helper-clearfix">
		        	     <li title="Help" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"></span></li>    
		       		 </ul>
				</div>
			</div> -->
			
		</td>
	</tr>

</table>

<div id="addServerDialog"  title="Add a Server">
      <p>Add The Server/Application Name. This is the not the actual JVM Name.</p>
      <label for="serverName">Server Name</label><input type="text" name="serverName" id="serverName" class="text ui-widget-content ui-corner-all" /><br>
</div>
